$theme: (
  ligth: (
    bgColor: "#fff",
    color: "#fff",
  ),
  drak: (
    bgColor: "#000",
    color: "#000",
  ),
);

$curTheme:'light';

@mixin useTheme() {
  //   html[data-theme="light"] & {
  //     background-color: "#fff";
  //     color: "#fff";
  //   }

  //   html[data-theme="drak"] & {
  //     background-color: "#000";
  //     color: "#000";
  //   }
  @each $key, $value in $theme {
    $curTheme:$key !global;
    html[data-theme="#{$key}"] & {
      @content;
    }
  }
}

@function getVar($key){
    $themeMap: map-get($map: $theme, $key: $curTheme);
    @return map-get($map: $themeMap, $key: $key);
}

.item {
  width: 100px;
  height: 100px;
  @include useTheme {
    background-color: getVar('bgColor');
    color: getVar('color');
  }
}

